<template>
  <div class="container">
    <div class="sign_in">
      <div class="login_img">
        <!-- <img src="@/assets/imgs/login/logo.png" class="login_logo" /> -->
      </div>
      <div class="sign_div">
        <div class="login_form">
          <div class="login_item">
            <div class="sign_top">
              <language class="sign_top_select" />
            </div>
            
            <div style="width: 100%; height: 64px; margin-bottom: 55px; display: flex; align-items: center; justify-content: flex-start;">
              <img src="@/assets/imgs/login/logo.png" class="login_logo" style="width: 64px; height: 64px; margin-right: 16px;" />
              <span style="font-size: 38px; font-weight: bold; color: #333; letter-spacing: 2px;">YOUDIANSTAR</span>
            </div>

            <div class="sign_title">
              <span class="sign_title_login">{{ $t('m.Login') }}</span>
            </div>

 
            <!-- 登录 -->
            <el-form :model="form" :rules="rules" ref="form">
              <!--phone-->
              <div>
                <div class="sign_form_title">
                  {{ $t('m.Login_Phone_Number') }}
                </div>
                <el-form-item prop="phone" class="sign_form_phone">
                  <country-code
                    :code.sync="country.code"
                    :code-number.sync="form.code"
                    @select="selectCountry"
                    id="box"
                  />
                  <el-input
                    :placeholder="$t('m.Enterphonenumber')"
                    clearable
                    v-model="form.phone"
                    @input="changePhone"
                    :maxlength="15"
                    class="sign_form_input sign_form_input2"
                    :style="widthStyle"
                  />
                </el-form-item>
              </div>
              <!--password-->
              <div>
                <div class="sign_form_title">
                  {{ $t('m.Password') }}
                </div>
                <el-form-item prop="password">
                  <el-input
                    type="password"
                    :maxlength="16"
                    @input="changePassword"
                    show-password
                    :placeholder="$t('m.Enterpassword')"
                    clearable
                    v-model="form.password"
                    @keyup.enter.native="submit"
                    class="sign_form_input"
                  >
                  </el-input>
                </el-form-item>
              </div>
            </el-form>

            <div class="forgot_password">
              <span>
                <el-checkbox v-model="isRemember" :checked="isRemember">{{
                  $t('m.remember_password')
                }}</el-checkbox>
              </span>
              <span @click="$router.push('/forget-password')">{{
                $t('m.Login_Forget_Password')
              }}</span>
            </div>

            <!--提交按钮-->
            <el-button class="sign_btn" @click="submit">
              {{ $t('m.Login') }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CountryCode from '../../components/country-code.vue'
import Language from '@/components/language.vue'
import * as jsencrypt from '@/common/jsencrypt'
export default {
  components: { Language, CountryCode },
  // inject: ['reload'],

  name: 'login',
  data () {
    // 验证国家码+手机
    const validatorCodePhone = (rule, value, callback) => {
      // console.log(value);
      if (!this.form.code) {
        callback(new Error(this.$t('m.pleaseChoose')))
        return
      } else if (value == '' || !value) {
        callback(new Error(this.$t('m.Enterphonenumber')))
        return
      } else if (!this.$reg.mobile.test(value)) {
        callback(new Error(this.$t('m.Shop_Created_shop_phone')))
        return
      } else {
        callback()
      }
    }
    // 验证密码
    const checkPassword = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{8,16}$/
      if (!value) {
        return callback(new Error(this.$t('m.Enterpassword')))
      } else if (!reg.test(value)) {
        return callback(new Error(this.$t('m.Set_login_password')))
      } else {
        callback()
      }
    }

    return {
      // 记住密码标识
      isRemember: false,
      // 国家信息
      country: '',

      form: {
        // 登入类型：1-账号密码 2-验证码
        type: 1,
        // 国家码
        code: '',
        phone: '',
        password: ''
      },
      rules: {
        phone: [
          {
            required: true,
            validator: validatorCodePhone,
            trigger: ['blur', 'change']
          }
        ],
        password: [
          { required: true, trigger: 'blur', validator: checkPassword }
        ]
      },
      codeWidth: ''
    }
  },
  computed: {
    widthStyle () {
      return {
        '--codeWidth': this.codeWidth
      }
    },
    getLang () {
      return this.$cache.getLang() ? this.$cache.getLang() : 'EN'
    }
  },
  created () {
    this.getLoginAccount()
    this.getCountry()
  },
  mounted () {
    this.getWidth()
  },
  beforeRouteEnter (to, from, next) {
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#e4e4eb')
    next()
  },

  beforeRouteLeave (to, from, next) {
    document.querySelector('body').removeAttribute('style')
    next()
  },

  methods: {
    //获取下拉框宽度
    getWidth () {
      let box = document.getElementById('box')
      this.codeWidth = box.clientWidth + 32 + 'px'
    },
    // 获取国家信息
    getCountry () {
      const country = this.$cache.getCountry()
      // console.log('getCountry', country)
      if (country) {
        this.country = country
        this.form.code = country.codes
      } else {
        this.country = this.$country
        this.form.code = this.$country.codes
      }
    },
    changePhone (val) {
      this.form.phone = this.$check.onlyNum(val)
    },
    getLoginAccount () {
      const loginAccount = this.$cache.get('loginAccount', 'local')
      if (loginAccount) {
        this.isRemember = true
        loginAccount.password = jsencrypt.decrypt(loginAccount.password)
        this.form = loginAccount
      }
    },
    //密码输入限制
    changePassword (val) {
      this.form.password = this.$check.password(val)
    },
    submit () {
      this.$refs.form.validate(valid => {
        // console.log(valid, this.form)
        if (!valid) {
          return
        }
        const param = { ...this.form }
        // 数据处理
        if (this.form.password) {
          param.password = this.$md5(this.form.password)
        }
        this.$openLoading({ target: '.sign_div' })
        this.$api.login.login(param).then(res => {
          this.$closeLoading()
          if (this.$ok(res)) {
            this.$store.commit('LOGIN', res)
            this.$message.success(res.message)
            // 保存国家码
            this.$cache.setCountry(this.country)
            // 记住密码
            if (this.isRemember) {
              const form = JSON.parse(JSON.stringify(this.form))
              form.password = jsencrypt.encrypt(
                encodeURIComponent(form.password)
              )
              this.$cache.set('loginAccount', form, 'local')
            } else {
              this.$cache.remove('loginAccount', 'local')
            }
            // 存在重定向参数
            if (this.$route.query.redirect) {
              this.jump(this.$route.query.redirect)
            } else {
              if (
                res.data.platformList[0].serveList[0].menuList &&
                res.data.platformList[0].serveList[0].menuList.length > 0
              ) {
                if (
                  res.data.platformList[0].serveList[0].menuList[0].id == '6' ||
                  res.data.platformList[0].serveList[0].menuList[0].id == '47'
                ) {
                  this.jump(
                    res.data.platformList[0].serveList[0].menuList[0].defaultUrl
                  )
                  this.$store.commit(
                    'SET_ACTIVE_ID',
                    res.data.platformList[0].serveList[0].menuList[0].id
                  )
                } else {
                  this.jump(
                    res.data.platformList[0].serveList[0].menuList[0]
                      .childMenu[0].defaultUrl
                  )
                  this.$store.commit(
                    'SET_ACTIVE_ID',
                    res.data.platformList[0].serveList[0].menuList[0]
                      .childMenu[0].parentId
                  )
                }
              }
            }
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    // 选择区号
    selectCountry (data) {
      // console.log('selectCountry', data)
      this.country = data
      this.$nextTick(() => {
        this.getWidth()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  min-width: 1200px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

.sign_in {
  display: flex;
  min-height: 100vh;
  .login_img {
    position: relative;
    background: url('@/assets/imgs/login/login_joltzly.jpg') center / cover
      no-repeat;
    width: 67.77778%;
    .login_logo {
      position: absolute;
      width: 64px;
      height: 64px;
      top: 24px;
      left: 24px;
    }
  }
  .sign_div {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 400px;
    background-color: #fff;

    .login_form {
      display: flex;
      flex: 1;
      width: 100%;
      .login_item {
        width: 100%;
        padding: 0 10.35%;
      }
    }

    .sign_top {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin: 60px 0 100px 0;
      .sign_top_select {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        // background: #f5f5f7;
        border-radius: 10px;
        padding: 0 15px;
      }
    }

    .sign_title {
      padding: 12px 0 12px 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .sign_title_login {
        font-size: 23px;
        font-weight: 700;
        text-align: left;
        color: #39404d;
        line-height: 28px;
      }
    }

    .sign_form_title {
      font-size: 17px;
      font-weight: 600;
      text-align: left;
      color: #39404d;
      line-height: 20px;
      margin: 16px 0 8px 6px;
    }

    .sign_form_input {
      // width: 368px;
      &::placeholder {
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #99999b;
        line-height: 16px;
      }

      ::v-deep .el-input__inner {
        width: 100%;
        height: 56px !important;
        background: #ffffff;
        border: 1px solid #e4e4e6;
        border-radius: 10px;
        padding-left: 16px !important;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        // color: #39404d;
        line-height: 16px;
      }
    }

    .sign_form_input2 {
      ::v-deep .el-input__inner {
        padding-left: var(--codeWidth) !important;
      }
    }

    .sign_form_phone {
      // position: relative;
      .country_code {
        position: absolute;
        z-index: 999;
        left: 16px;
        top: 20px;
      }
    }

    .forgot_password {
      font-size: 14px;
      font-weight: 500;
      text-align: right;
      color: $color;
      line-height: 16px;
      margin-top: 16px;

      display: flex;
      justify-content: space-between;
      align-items: center;

      & img {
        width: 16px;
        height: 16px;
        vertical-align: bottom;
      }

      & > span {
        cursor: pointer;
      }

      ::v-deep .el-checkbox {
        width: 16px;
        height: 16px;
        border-radius: 50%;
      }
      ::v-deep .el-checkbox__inner {
        width: 16px;
        height: 16px;
        border-radius: 50%;
      }
      ::v-deep .el-checkbox__inner::after {
        left: 5px;
        height: 8px;
      }
      ::v-deep .el-checkbox__label {
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #39404d;
        line-height: 16px;
        padding-left: 6px;
      }

      ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
        color: var(--text-color) !important;
      }
    }

    .sign_btn {
      width: 100%;
      height: 56px;
      background: $color;
      border-radius: 10px;
      font-size: 17px;
      font-weight: 600;
      text-align: center;
      color: #ffffff;
      line-height: 20px;
      margin: 40px 0;
      margin-left: 0px;
    }

    ::v-deep .el-form-item__error {
      left: 6px !important;
    }

    ::v-deep .el-form-item {
      margin-bottom: 16px;
    }
    ::v-deep .is-error {
      margin-bottom: 24px;
    }

    ::v-deep .el-form-item.is-error .el-input__inner,
    .el-form-item.is-error .el-input__inner:focus,
    .el-form-item.is-error .el-textarea__inner,
    .el-form-item.is-error .el-textarea__inner:focus {
      border-color: #fd5849;
    }
  }
}
</style>
